<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index.ejs</title>
		<link rel="stylesheet" href="../css/index.css" />
	</head>
	<body>
		<div class="wrap">
			<% include banner.ejs %> 
		    <div class="box">
				<form action="http://localhost:4399/admin" method="post" autocomplete="off">
					<p id="p1">账号：</p>
					<input type="text" name="user" id="user" value=""  />
					<p id="p2">密码：</p>
					<input type="password" name="pass" id="pass" value="" /><br /><br />
					<input type="submit" value="登录" id="loginBtn" />
			    </form>
			</div>
			<div class="content">
				<!--1级菜单-->
				<div class="first-c">
					<ul>
						<li class="first-list"><a href="#">作品分类</a></li>
						<li class="first-list"><a href="#">全部作品</a></li>
						<li class="first-list"><a href="#"> 排行</a></li>
						<li class="first-list"><a href="#">完本</a></li>
						<li class="first-list"><a href="#">免费</a></li>
					</ul>
				</div>
				<!--2级菜单-->
				<div class="second-c">
					<div class="children-c">
						<ul class="ch">
							<li class="title">作品分类</li>
							<li class="children-list"><a href="#">玄幻</a></li>
							<li class="children-list"><a href="#">奇幻</a></li>
							<li class="children-list"><a href="#">武侠</a></li>
							<li class="children-list"><a href="#">仙侠</a></li>
							<li class="children-list"><a href="#">都市</a></li>
							<li class="children-list"><a href="#">现实</a></li>
							<li class="children-list"><a href="#">军事</a></li>
							<li class="children-list"><a href="#">历史</a></li>
							<li class="children-list"><a href="#">游戏</a></li>
							<li class="children-list"><a href="#">体育</a></li>
							<li class="children-list"><a href="#">科幻</a></li>
							<li class="children-list"><a href="#">灵异</a></li>
							<li class="children-list"><a href="#">二次元</a></li>
							<li class="children-list"><a href="#">短篇</a></li>
						</ul> 	
						<ul class="ch">
							<li class="title">全部作品</li>
							<li class="children-list"><a href="#">分类</a></li>
							<li class="children-list"><a href="#">状态</a></li>
							<li class="children-list"><a href="#">字数</a></li>
							<li class="children-list"><a href="#">品质</a></li>
							<li class="children-list"><a href="#">更新时间</a></li>
						</ul> 	
						<ul class="ch">
							<li class="title">排行</li>
							<li class="children-list"><a href="#">热门作品排行</a></li>
							<li class="children-list"><a href="#">新书排行</a></li>
							<li class="children-list"><a href="#">社区排行</a></li>
							<li class="children-list"><a href="#">其他排行</a></li>
						</ul> 	
						<ul class="ch">
							<li class="title">完本</li>
							<li class="children-list"><a href="#">完本时间</a></li>
						</ul> 	
						<ul class="ch">
							<li class="title">免费</li>
							<li class="children-list"><a href="#">限时免费</a></li>
							<li class="children-list"><a href="#">永久免费</a></li>
							
						</ul> 	
					</div>
				</div>
			</div>
			<div class="slideImage">
				<img src="../imgs/3.jpg"/>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		    var user=document.getElementById("user");
		    var pass=document.getElementById("pass");
		    var firstList=document.getElementsByClassName("first-list");
		    var childrenC=document.getElementsByClassName("children-c")[0];
		    var ch=childrenC.getElementsByClassName("ch");
		    //导航条登录按钮
		    var banLogin=document.getElementsByClassName("login")[0];
		    //登录框
		    var box=document.getElementsByClassName("box")[0];
		    //登录按钮
			var but=document.getElementById("loginBtn");
			var img=document.getElementsByClassName("slideImage")[0].getElementsByTagName("img")[0];
			//点击导航条登录
		    banLogin.onclick=function(){
		    	box.style.display="block";
		    }
		    //显示2级菜单
		    for (var i=0;i<firstList.length;i++) {
    	           firstList[i].setAttribute("data-list",i);
                        
					    	firstList[i].onmouseover=function(){
					    		var idx=this.getAttribute("data-list");
					    		childrenC.style.display="block";
					    		for (var j=0;j<ch.length;j++){
					    			
					    			ch[j].style.display="none";
					    			
					    			
					    		}
			                    ch[idx].style.display="block";
			                    
					    	};
			        
		    }
		    
		    //鼠标离开2级菜单区域，2级区域消失
		    childrenC.onmouseout=function(){
		    	childrenC.style.display="none";
		    };
		    //背景轮播图
		    var imgs=["../imgs/1.jpg","../imgs/2.jpg","../imgs/3.jpg","../imgs/4.jpg","../imgs/5.jpg","../imgs/6.jpg","../imgs/7.jpg","../imgs/8.jpg"];
		    var i=0;
            var timer=setInterval(function(){
                i++;
               if (i<imgs.length) {
               	 img.src=imgs[i];
               } else{
                 i=-1;      
               }
              
            },1000);
	</script>
</html>